<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="storeId"
          required
          label="门店ID">
          <a-input placeholder="请输入门店ID"  @change="changeName" type="Number" v-model="model.storeId"/>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="name"
          required
          label="门店名称">
          <a-input placeholder="请输入门店名称" disabled v-model="model.name"/>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="address"
          required
          label="门店地址">
          <a-input placeholder="请输入门店地址" disabled v-model="model.address"/>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="openTime"
          required
          label="营业时间">
          <a-input placeholder="营业时间" disabled v-model="model.openTime"/>
        </a-form-model-item>

        <!-- <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="ip"
          required
          label="IP地址">
          <a-input placeholder="请输入IP地址" v-model="model.ip"/>
        </a-form-model-item> -->

        <!-- <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="deviceName"
          required
          label="设备名称">
          <a-input placeholder="设备名称" v-model="model.deviceName"/>
        </a-form-model-item> -->

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="brandId"
          required
          label="品牌">
          <a-select v-model="model.brandId" placeholder="请选择" allowClear>
            <a-select-option :value="item.id.toString()" v-for="item in brandList" :key="item.id"> {{ item.brandName }} </a-select-option>
          </a-select>
        </a-form-model-item>

      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import { saveOrUpdateStore, checkStore, brandList } from '@/api/marketingCenter/operations'
  import qs from 'qs'

  export default {
    name: 'DictModal',
    data() {
      return {
        value: 1,
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        brandList:[],
        validatorRules: {
          storeId: [{ required: true, message: '请输入门店ID!' }],
          name: [{ required: true, message: '请输入门店名称!' }],
          address: [{ required: true, message: '请输入门店地址!' }],
          openTime: [{ required: true, message: '请输入营业时间!' }],
          brandId: [{ required: true, message: '请选择', trigger: 'change' }],
          // ip: [{ required: true, message: '请输入IP地址!' }],
          // deviceName: [{ required: true, message: '请输入设备名称!' }],
          }
      }
    },
    created() {
    },
    methods: {
      changeName(e) {
        let data = {'storeId':this.model.storeId}
        checkStore(qs.stringify(data)).then(res => {
          if (res.code == 200) {
              this.$forceUpdate()
              this.model.name = res.data.name
              this.model.openTime = res.data.openTime
              this.model.address = res.data.address
              this.model.latitude = res.data.latitude
              this.model.longitude = res.data.longitude
          }
        })
      },
      add() {
        this.edit({})
        this.getBrandList()
      },
      edit(record) {
        if (record.id) {
          this.visiblekey = true
        } else {
          this.visiblekey = false
        }
        this.getBrandList()
        this.model = Object.assign({}, record)
        this.visible = true
      },
      //品牌下拉
      getBrandList() {
        brandList({
          current: 1,
          size: '99',
          state: '1'
        })
          .then(res => {
            if (res.code === 200) {
              this.brandList = res.data
            } else {
              this.$message.error(res.msg || res.message)
            }
          })
          .catch(err => {})
      },
      // 确定
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            // this.model.storeId = (this.model.storeId || '').trim()
            // this.model.name = (this.model.name || '').trim()
            // this.model.address = (this.model.address || '').trim()
            // this.model.ip = (this.model.ip || '').trim()
            // this.model.deviceName = (this.model.deviceName || '').trim()
            let obj
            if (!this.model.id) {
              obj = saveOrUpdateStore(this.model)
            } else {
              obj = saveOrUpdateStore(this.model)
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.msg)
                that.$emit('ok')
              } else {
                that.$message.warning(res.msg)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false;
          }
        })
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.resetFields();
      }
    }
  }
</script>